<template>
  <div class="tableBox">
    <Vue3SeamlessScroll :limitScrollNum="5" :list="list" :hover="true" :step="0.4" :wheel="true" :isWatch="true">
      <div v-for="(item, index) in list" :key="item.date" class="listStyle">
        <div>{{ item.date }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.address }}</div>
      </div>
    </Vue3SeamlessScroll>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
let list = reactive([])
const forData = () => {
  for (let i = 0; i < 100; i++) {
    list.push({
      date: i,
      name: '王小虎' + i,
      address: '上海市普陀区金沙江路 1518 弄'
    })
  }
}
forData()
</script>
<style scoped>
.tableBox{
  width: 50%;
  height: 300px;
}
.listStyle {
  display: flex;
  border: 1px solid #ccc;
  padding: 15px;
  justify-content: space-between;
}
</style>